<template>
  <div class="app">
    <!-- navbar -->
    <!-- <van-nav-bar title="标题" left-arrow @click-left="onClickLeft" /> -->

    <div style="height: 2.2rem; overflow: hidden; paddingTop: 2rem">
      <dl style="padding-right: 1rem">
        <dd style="float: right; margin-left: 0.5rem">
          <img
            v-if="!headimgurl"
            style="border-radius: 50%; height: 2.2rem; width: 2.2rem"
            src="../assets/tu.jpg"
            alt=""
          />
          <img
            v-else
            style="border-radius: 50%; height: 2.2rem; width: 2.2rem"
            :src="headimgurl"
            alt=""
          />
        </dd>

        <dt
          v-if="!nickname"
          style="
            float: right;
            line-height: 1rem;
            margin-top: 0.7rem;
            font-size: 0.8rem;
            color: #fff;
          "
        >
          小兔
        </dt>
        <dt
          v-else
          style="
            float: right;
            line-height: 1rem;
            margin-top: 0.7rem;
            font-size: 0.8rem;
            color: #fff;
          "
        >
          {{ nickname }}
        </dt>
      </dl>
    </div>

    <div class="kuangTwo"></div>
    <div class="kuangOne"></div>
    <div class="kuang">
      <ul>
        <li
          v-for="(item, index) of answer"
          :key="index"
          v-show="index == control"
          style="padding: 0.8rem"
        >
          <span style="font-size: 0.8rem">
            {{ index + 1 }}/{{ answer.length }}
          </span>
          <div style="font-size: 0.8rem; margin-top: 0.2rem">
            问题{{ index + 1 }}
          </div>
          <div
            style="
              font-size: 0.8rem;
              margin-top: 0.3.5rem;
              margin-bottom: 0.6rem;
            "
          >
            {{ item.name }}
          </div>

          <div v-for="(item1, index1) of item.imglis" :key="index1">
            <div
              style="height: 4rem"
              v-if="2 >= item.imglis.length"
              @click="checkedBtn(index1)"
            >
              <div
                :style="`
                  width: 1.5rem;
                  height: 1.5rem;
                  border-radius: 50%;
                  border: 1px solid black;
                  float: left;
                  line-height: 1.5rem;
                  text-align: center;
                  margin-top: 1.7rem;
                  background-color:${
                    fourbtn1 == index1 ? '#0dcf75' : '#ffffff'
                  };
                  `"
              >
                {{ options[index1] }}
              </div>

              <img
                :style="`height: ${item.remh}rem;
                  width: ${item.remw}rem;
                  float: left;
                  margin-top: 1rem;
                  margin-left: 1rem;`"
                :src="item1"
                alt=""
              />
            </div>

            <div
              v-if="3 == item.imglis.length"
              style="width: 100%"
              @click="checkedBtn(index1)"
            >
              <div style="width: 100%; height: 2.2rem">
                <div
                  :style="`
                      border-radius: 50%;
                      width: 1.5rem;
                      height: 1.5rem;
                      border: 1px solid black;
                      float: left;
                      line-height: 1.5rem;
                      text-align: center;
                      margin-top: 0.1rem;
                       background-color:${
                         fourbtn1[index] == true ? '#0dcf75' : '#ffffff'
                       };

                      `"
                >
                  {{ options[index1] }}
                </div>

                <span
                  style="
                    float: left;
                    line-height: 1.79rem;
                    font-size: 0.8rem;
                    margin-left: 0.7rem;
                  "
                >
                  {{ item1 }}
                </span>
              </div>
            </div>

            <div
              v-if="4 == item.imglis.length"
              style="width: 100%"
              @click="checkedBtn(index1)"
            >
              <div style="width: 100%; height: 2.2rem">
                <div
                  :style="`

                      border-radius: 50%;
                      width: 1.5rem;
                      height: 1.5rem;
                      border: 1px solid black;
                      float: left;
                      line-height: 1.5rem;
                      text-align: center;
                      margin-top: 0.1rem;
                      background-color:${
                        fourbtn[index1] == true ? '#0dcf75' : '#ffffff'
                      };
                      

                      `"
                >
                  {{ options[index1] }}
                </div>

                <span
                  :style="`width: 70%;
                    float: left;
                    font-size: 0.65rem;
                    margin-left: 0.7rem;
                    margin-top: 0.2rem;
                    color:${fourbtn[index1] == true ? '#0dcf75' : '#000000'}
                    `"
                >
                  {{ item1 }}
                </span>
              </div>
            </div>
          </div>
        </li>
      </ul>
      <p v-if="showbtn" class="rightanswer">正确答案为:{{ right }}</p>
    </div>

    <van-button
      type="primary"
      v-if="control < 4 && !showbtn"
      class="btn"
      @click="naxtTi"
      >下一题</van-button
    >

    <van-button v-if="control >= 4" type="primary" @click="submit" class="btn"
      >已完成</van-button
    >
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { reactive, toRefs } from "@vue/reactivity";
import { Toast } from "vant";
import { onMounted, ref } from "vue";
import axios from "../utils/index";
export default {
  async created() {
    if (localStorage.getItem("name") && localStorage.getItem("img")) {
      this.nickname = localStorage.getItem("name");
      this.headimgurl = localStorage.getItem("img");
    } else {
      var url = window.location.href;
      var newurl = url.split("=")[1];
      var code = newurl.split("&")[0];
      var res = await axios.post("/api/login/register", {
        code: code,
      });
      if (res.data.code == "200") {
        console.log(res.data.data)
        this.nickname = res.data.data.user.name;
        this.headimgurl = res.data.data.user.imgs;
        localStorage.setItem("uid", res.data.data.user.id);
        localStorage.setItem("token", res.data.data.access_token);
        localStorage.setItem("name", res.data.data.user.name);
        localStorage.setItem("openid",res.data.data.user.openid)
        localStorage.setItem("img", res.data.data.user.imgs);
      }
    }
    this.$store.commit("setone", true);
  },

  setup() {
    const store = useStore();
    const nickname = ref();
    const headimgurl = ref();
    const right = ref();
    const showbtn = ref(false);
    const router = useRouter();
    // 选中题按钮
    const checkedBtn = (i) => {
      // alert(i)
      // console.log(i)
      arr.fourbtn[i] = !arr.fourbtn[i];
      arr.fourbtn1 = i;
      store.commit("setfourbtn1", arr.fourbtn1);
      store.commit("setfourbtn", arr.fourbtn);
      // console.log(arr.fourbtn);
    };

    const naxtTi = () => {
      if (arr.control == 3) {
        var res = arr.fourbtn.every((item) => {
          return item == true;
        });
        if (res) {
          naxtTi1();
          return false;
        } else {
          right.value = arr.answer[arr.control].info;
          showbtn.value = true;
          setTimeout(() => {
            naxtTi1();
          }, 2000);
          return false;
        }
      }
      if (arr.control == 4) {
        naxtTi1();
        return false;
      }

      console.log(arr.answer[arr.control].answer, "正确答案");
      console.log(arr.fourbtn);
      console.log(arr.fourbtn1, "选择的答案");
      if (arr.answer[arr.control].answer == arr.fourbtn1) {
        naxtTi1();
      } else {
        right.value = arr.answer[arr.control].info;
        showbtn.value = true;
        setTimeout(() => {
          naxtTi1();
        }, 2000);
        // alert("错误");
      }
    };

    // 点击选项进入下一题
    const naxtTi1 = () => {
      if (
        arr.fourbtn1 == -1 ||
        arr.fourbtn.forEach((item, index) => {
          item != true;
        })
      ) {
        // 警告通知
        Toast.fail("选项不能为空!");
        return false;
      }
      arr.fourbtn1 = -1;
      store.commit("setfourbtn1", arr.fourbtn1);
      arr.control++;
      store.commit("setque", arr.control);
      arr.fourbtn = [false, false, false, false];
      store.commit("setfourbtn", arr.fourbtn);
      showbtn.value = false;
    };

    let arr = reactive({
      fourbtn1: store.state.fourbtn1,
      fourbtn: store.state.fourbtn,
      control: store.state.currentque,
      options: ["A", "B", "C", "D"],
      answer: [
        {
          name: "全国城管执法统一现行标识是那些（单选）",
          imglis: [
            require("../assets/chengguan.png"),
            require("../assets/city.png"),
          ],
          answer: 1,
          remh: 3,
          remw: 3,
          wstyle: 1.5,
          hstyle: 1.5,
          info: "B",
        },
        {
          name: "上海市城管执法车辆的现行标识是以下哪一个（单选）",
          imglis: [
            require("../assets/car1.png"),
            require("../assets/car2.png"),
          ],
          answer: 1,
          remh: 3,
          remw: 6,
          wstyle: 1.5,
          hstyle: 1.5,
          info: "B",
        },
        {
          name: "上海市城管执法系统现行制式服装是哪一个（单选）",
          imglis: [
            require("../assets/people1.png"),
            require("../assets/people2.png"),
          ],
          answer: 0,
          remh: 3,
          remw: 4.5,
          wstyle: 1.5,
          hstyle: 1.5,
          info: "A",
        },
        {
          name: "上海市城管执法系统职业精神是什么（可多选）",
          imglis: ["崇法善治", "忠诚为民", "公正清廉", "砥砺奋进"],
          answer: 1234,
          info: "ABCD",
        },
        {
          name: "您对静安区城管执法较为满意的工作是（可多选）",
          imglis: [
            "城管进社区工作（“一人居”社区工作室）",
            "防疫支援工作",
            "“法润静安”普法宣传工作",
            "街面环境治理工作",
          ],
        },
      ],
    });
    const onClickLeft = () => history.back();
    const submit = () => {
      let pd = arr.fourbtn.indexOf(true);
      if (pd == -1) {
        Toast.fail("选项不能为空!");
        return false;
      } else {
        router.push("/Finish");
      }
    };
    return {
      checkedBtn,
      naxtTi,
      naxtTi1,
      onClickLeft,
      ...toRefs(arr),
      submit,
      nickname,
      headimgurl,
      right,
      showbtn,
    };
  },
};
</script>

<style scoped>
.btn {
  position: absolute;
  top: 23rem;
  width: 12.2rem;
  border-radius: 1rem;
  margin-left: 1.8rem;
  box-shadow: 0px 0.3rem 0.3rem #888888;
}
.kuang {
  /* margin-top: 1rem;
  margin-left: 1.5rem; */
  left: 1.5rem;
  top: 5rem;
  border-radius: 1rem;
  background-color: #ffffff;
  /* height: 15rem; */
  height: 16rem;
  width: 13rem;
  position: absolute;

  box-shadow: 0px 0.03rem 0.4rem #888888;
}
.kuangOne {
  background-color: #e6eaed;
  border-radius: 1rem;
  left: 1.75rem;
  /* margin-left: 1.7rem; */
  /* height: 2rem; */
  height: 3rem;
  width: 12.45rem;
  position: absolute;
  top: 18.8rem;
  box-shadow: 0px 0.03rem 10px #888888;
}
.kuangTwo {
  background-color: #e8dfe0;
  border-radius: 1rem;
  /* margin-left: 1.5rem; */
  top: 19.5rem;
  left: 2.05rem;
  /* height: 2rem; */
  height: 3rem;
  width: 11.8rem;
  position: absolute;
  box-shadow: 0px 0.03rem 10px #888888;
}

.app {
  position: relative;
  height: 100%;
  background: url("../assets/backgroundimg2.png") 100%;
}
.rightanswer {
  font-size: 0.8rem;
  position: absolute;
  top: 14.5rem;
  left: 1.05rem;
  color:#FF0000;
}
</style>